<template>
  <div>
    <div class="padding-class">
      <el-card style="margin-bottom: 20px">
        <el-button type="primary" @click="openDialog">添加合作单位</el-button>
      </el-card>
      <el-card
        v-for="(cooperation,index) in cooperations"
        style="width: 150px; float: left;margin-right: 20px;margin-bottom: 20px"
        :body-style="{ padding: '0px' }"
      >
        <img style="width: 150px;height: 150px" :src="baseUrl + cooperation.url" class="image" @click="showDetail(index)">
<!--        <span   class="span"  style="font-size: small">名称：</span>-->
        <div style="text-align: center;padding: 14px">
         <span   class="span" style="font-size: small;font-weight: bolder"><template>{{ cooperation.name }}</template></span>
        </div>
        <div style="text-align: center;padding: 14px">
         <span  class="span" style="font-size: small">简介：</span> <span   class="span"  style="font-size: small"><template>{{ cooperation.introduction }}</template></span>
        </div>
      </el-card>
    </div>
    <el-dialog
      title="添加合作单位"
      :visible.sync="showCooperation"
      width="30%"
      center
    >
      <el-form ref="cooperationInfo" :model="cooperationInfo" label-width="100px">
        <el-form-item label="名称:">
          <el-input v-model="cooperationInfo.name" />
        </el-form-item>
        <el-form-item label="图片：">
          <!--          <el-upload-->
          <!--            class="avatar-uploader"-->
          <!--            action="http://47.96.182.33:8081/file"-->
          <!--            :show-file-list="false"-->
          <!--            :on-success="handleAvatarSuccess"-->
          <!--            :before-upload="beforeAvatarUpload">-->
          <!--            <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
          <!--            <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
          <!--          </el-upload>-->
<!--          <el-upload-->
<!--            ref="upload"-->
<!--            class="avatar-uploader"-->
<!--            action="http://47.96.182.33:8081/file"-->
<!--            :before-upload="beforeAvatarUpload"-->
<!--            :http-request="uploadImage"-->
<!--            :on-change="fileChange"-->
<!--          />-->
          <el-upload
            :disabled="readonly"
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :http-request="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="cooperationInfo.url" :src="baseUrl+cooperationInfo.url" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="简介：">
          <el-input v-model="cooperationInfo.introduction" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showCooperation = false">关闭</el-button>
        <el-button type="primary" @click="doUpdate">提交</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="合作单位简介"
      :visible.sync="showCooperationIntro"
      width="30%"
      center
    >
      <el-form ref="cooperationInfo" :model="cooperationInfo" label-width="100px">
        <el-form-item label="简介：">
          <el-input v-model="cooperationInfo.introduction" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showCooperationIntro = false">关闭</el-button>
        <!--        <el-button type="primary" @click="doUpdate">提交</el-button>-->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAllCooperationList, uploadCooperationList, updateCooperationList } from '@/api/cooperation'
import { uploadFile } from '../../../api/file'

export default {
  name: 'Cooperation',
  data() {
    return {
      baseUrl: this.global.picBaseUrl,
      cooperations: [],
      cooperation: {
        coid: '',
        url: '',
        name: '',
        introduction: ''
      },
      cooperationInfo: {
        coid: '',
        url: '',
        name: '',
        introduction: ''
      },
      showCooperation: false,
      showCooperationIntro: false,
      imageUrl: ''
    }
  },
  created() {
    this.getCooperations()
  },
  methods: {
    getCooperations() {
      getAllCooperationList().then(res => {
        this.cooperations = res.data.list
      }).catch(err => {
        this.$message.error('请求失败！')
      })
    },
    //  handleAvatarSuccess(res, file) {
    //   console.log(res,file)
    //   var that = this
    //    const fileObj = item.file
    //    const form = new FormData()
    //    form.append('file',fileObj)
    //    uploadFile(form).then(res => {
    //      that.imageUrl = 'http://47.96.182.33:8081'+res.data
    //      console.log(that.imageUrl)
    //      that.$message.success('上传成功！')
    //    }).catch(err => {
    //      that.$message.error('请求失败！')
    //    })
    //   // this.imageUrl = URL.createObjectURL(file.raw);
    //   // this.cooperationInfo = this.imageUrl
    // },
    uploadImage(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      uploadFile(formData).then(res => {
        this.$message.success('上传成功！')
      }).catch(err => {
        this.$message.error('上传失败！')
      })
    },
    fileChange(file) {
      this.$refs.upload.clearFiles()
    },

    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    openDialog() {
      this.showCooperation = true
    },
    // doUpdate() {
    //   uploadCooperationList({ ...this.cooperationInfo }).then(res => {
    //     this.$message.success('添加成功！')
    //     this.showCooperation = false
    //     this.getCooperations()
    //   }).catch(err => {
    //     this.$message.error('添加失败！')
    //     this.showCooperation = false
    //   })
    // },
    doUpdate() {
      uploadCooperationList({
        coid:this.cooperationInfo.coid,
        url:this.cooperationInfo.url,
        name:this.cooperationInfo.name,
        introduction:this.cooperationInfo.introduction
      }).then(res => {
        this.$message.success('添加成功！')
        this.showCooperation = false
        this.getCooperations()
      }).catch(err => {
        this.$message.error('添加失败！')
        this.showCooperation = false
      })
    },
    showDetail(index) {
      this.showCooperationIntro = true
      this.cooperationInfo = this.cooperations[index]
    },
//图片上传
    handleAvatarSuccess(item) {
      var that = this
      const fileObj = item.file
      // FormData 对象
      const form = new FormData()
      // 文件对象
      form.append('file', fileObj)
      uploadFile(form).then(res => {
        console.log(res.data)
        this.cooperationInfo.url = res.data
        that.$message.success('上传成功！')
      }).catch(err => {
        that.$message.error('上传请求失败！')
      })
      // console.log(res.status)
      // this.imageUrl = URL.createObjectURL(file.raw)
      // console.log(res)
      // this.personalForm.headPic = this.imageUrl
    },
//
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      // const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!')
      // }
      return isJPG
      // return isLt2M
      // return isJPG && isLt2M
    },
  }
}
</script>

<style scoped>
  .padding-class {
    padding: 20px;
  }
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>
<style type="text/css">
  .span{
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space:nowrap;
    /*width:240px;*/
    /*height:24px;*/
    display:block;
  }
</style>
